<template>
  <div class="detail-base">
    <t-card title="执行记录详情" :bordered="false">
      <div class="info-block">
        <div v-for="(item, index) in baseInfoData" :key="index" class="info-item">
          <h1>{{ item.name }}</h1>
          <span>
            {{ item.value }}
          </span>
        </div>
      </div>
    </t-card>

    <t-card title="用例执行结果" class="container-base-margin-top" :bordered="false">
      <t-table
        :columns="columns"
        :data="caseListData"
        :pagination="pagination"
        :hover="hover"
        rowKey="index"
        @sort-change="sortChange"
        @change="rehandleChange"
      >
        <template #status="{ row }">
          <t-tag v-if="row.status === CASE_STATUS.INIT" theme="danger" variant="light">未执行</t-tag>
          <t-tag v-if="row.status === CASE_STATUS.PENDING" theme="warning" variant="light">执行中</t-tag>
          <t-tag v-if="row.status === CASE_STATUS.SUCCESS" theme="success" variant="light">执行成功</t-tag>
          <t-tag v-if="row.status === CASE_STATUS.FAIL" theme="danger" variant="light">执行失败</t-tag>
        </template>
        <template #op="slotProps">
          <a class="t-button-link" @click="listClick(slotProps)">查看日志</a>
        </template>
        <order-descending-icon slot="op-column" />
      </t-table>
    </t-card>
  </div>
</template>
<script>
import { prefix } from '@/config/global';
import model from '@/service/service-detail-base';
import {
  CASE_STATUS,
  CASE_STATUS_OPTIONS,
} from '@/constants';

export default {
  name: 'DetailBase',
  data() {
    return {
      CASE_STATUS,
      CASE_STATUS_OPTIONS,
      prefix,
      baseInfoData: [],
      columns: [
        {
          title: 'ID',
          fixed: 'left',
          width: 50,
          align: 'left',
          ellipsis: true,
          colKey: 'id',
        },
        {
          title: '用例名称',
          width: 200,
          ellipsis: true,
          colKey: 'case_name',
        },
        {
          title: '开始时间',
          width: 200,
          ellipsis: true,
          colKey: 'start_time',
        },
        {
          title: '结束时间',
          width: 100,
          ellipsis: true,
          colKey: 'end_time',
        },
        {
          title: '用例执行状态',
          width: 70,
          ellipsis: true,
          colKey: 'status',
        },
        {
          align: 'left',
          fixed: 'right',
          width: 200,
          colKey: 'op',
          title: '操作',
        },
      ],
      caseListData:[],
    };
  },
  mounted() {
    const recordId = this.$route.query.id;
    console.log('recordId', recordId);
    const params = {
      record_id: recordId,
    };
    this.$request
      .get('/api/query/record_info', {params})
      .then((res) => {
        if (res.data.code === '000') {
          this.baseInfoData = res.data.data.record_basic_info;
          this.caseListData = res.data.data.case_list;
          this.pagination = {
            ...this.pagination,
            total: this.data.length,
          };
        }
      })
      .catch((e) => {
        console.log(e);
      })
      .finally(() => {
        this.dataLoading = false;
      });
  },
  methods: {},
};
</script>
<style lang="less" scoped>
@import './index';
</style>
